<template>
  <q-item v-for="rowIndex in rows" :key="rowIndex"
    :class="`${stripe && rowIndex % 2 === 0 ? 'bg-grey-2' : ''} ${classes || ''}`"
    class="q-info row no-wrap q-pa-sm rounded-borders text-selectable" v-bind="$attrs" @click="emits('click', rowInfo)">
    <q-item-section v-for="colIndex in Number(cols)" :key="colIndex"
      :style="formatItemSectionStyle(rowIndex, colIndex)">
      <q-item-label class="row no-wrap items-center">
        <div :class="formatCol(rowIndex, colIndex, 'headerClasses')"
          :style="{ width: `${formatCol(rowIndex, colIndex, 'headerWidth') ?? (headerWidth || 80)}px` }"
          class="text-grey-6 text-right text-body2">
          <qx-tooltip :rowsNum="rowsNum">
            {{ formatCol(rowIndex, colIndex, 'label') }}
          </qx-tooltip>
        </div>
        <div :class="formatCol(rowIndex, colIndex, 'classes')" class="col text-body1 text-weight-medium q-pl-sm">
          <slot v-if="formatCol(rowIndex, colIndex, 'slot')" :name="formatCol(rowIndex, colIndex, 'field')"
            :row="rowInfo"></slot>
          <template v-else-if="formatCol(rowIndex, colIndex, 'useTag')">
            <q-badge :color="getColor(rowIndex, colIndex)" class="q-badge-dot absolute-badge-dot" rounded></q-badge>
            <span class="q-ml-md">{{ getLabel(rowIndex, colIndex) || $t('Unknown') }}</span>
          </template>
          <qx-tooltip v-else :rowsNum="rowsNum">{{ getLabel(rowIndex, colIndex) }}</qx-tooltip>
        </div>
      </q-item-label>
    </q-item-section>
  </q-item>
</template>
<script setup>
import { computed } from 'vue'
import { getColorByValue, getLabelByValue, getLabelByValues } from 'src/utils/utils.js'

const props = defineProps({
  defaultValue: String, classes: String,
  stripe: { type: Boolean, default: true },
  columns: { type: Array, default: () => [] },
  cols: { type: [String, Number], default: 3 },
  rowInfo: { type: Object, default: () => ({}) },
  rowsNum: { type: [Number, String], default: 2 },
  defaultColor: { type: String, default: 'grey-4' },
  headerWidth: { type: [Number, String], default: 80 }
})
const emits = defineEmits(['click'])

const rowHeight = computed(() => `${props.rowsNum * 1.125 + 0.75}rem`)
const rows = computed(() => Math.ceil(formatColumns.value.length / props.cols))
const formatColumns = computed(() => {
  let total = 0
  const { columns = [], cols = 1 } = props, tempColumns = columns.filter(el => el.showInfo !== false), indexCols = []
  for (let i = 0; i < tempColumns.length; i++) tempColumns[i].col && indexCols.push(i)
  for (const i in indexCols) {
    const newIndex = total + i, remValue = (newIndex + 1) % cols
    if (!remValue) continue
    total += remValue
    tempColumns.splice(newIndex, 0, ...new Array(remValue).fill({}))
  }
  return tempColumns
})
const formatItemSectionStyle = (rowIndex, colIndex) => {
  const index = formatIndex(rowIndex, colIndex) + 1, LENGTH = formatColumns.value.length, { cols } = props
  if (!formatColumns.value[LENGTH - 1].col) return void 0
  return index > LENGTH ? { flex: 0 } : index === LENGTH ? { flex: `${10000 * (Number(cols) - colIndex + 1)} 1 0%` }
    : void 0
}
const getColor = (rowIndex, colIndex) => {
  const { defaultColor = '', rowInfo = {} } = props
  const { field, options, props: rowProps, defaultColor: color } = formatColumns.value[formatIndex(rowIndex,
    colIndex)] || {}
  return getColorByValue(rowInfo[field], options, rowProps, color || defaultColor)
}
const getLabel = (rowIndex, colIndex) => {
  const { defaultValue, rowInfo = {} } = props
  const {
    field, options, props: rowProps, unit, format, multiple, defaultValue: value
  } = formatColumns.value[formatIndex(rowIndex, colIndex)] || {}
  if (unit) return `${rowInfo[field] || 0}${unit}`
  if (typeof format === 'function') return format(rowInfo[field], rowInfo)
  if (options) {
    if (multiple) return getLabelByValues(rowInfo[field], options, rowProps, value ?? defaultValue)
    return getLabelByValue(rowInfo[field], options, rowProps, value ?? defaultValue)
  }
  return rowInfo[field] ?? value ?? defaultValue ?? ''
}
const formatIndex = (rowIndex, colIndex) => (rowIndex - 1) * props.cols + colIndex - 1
const formatCol = (rowIndex, colIndex, field) => (formatColumns.value[formatIndex(rowIndex, colIndex)] || {})[field]
</script>
<style lang="scss" scoped>
.q-info {
  min-height: v-bind(rowHeight);
}

.q-item__section--main+.q-item__section--main {
  margin-left: 0;
}
</style>